{% extends "paned.html" %}

{% block title %} OCRopodium - {{doc.label}} Transcript {% endblock %}

{% block headerscript %}
    {% load compressed %}
    {% compressed_js 'undostack' %}
    {% compressed_js 'viewers' %}
    {% compressed_js 'document_edit' %}

    {% compressed_css 'viewers' %}
    {% compressed_css 'document_edit' %}
{% endblock %}

{% block lateloadscript %}
    <script type='application/javascript' src='/static/js/documents/editor.js'></script>

{% endblock %}

{% block widgetheader %}
<span data-val="{{doc.pid}}" id="page_name">{% if doc %}{{doc.label}}{% else %}Loading...{% endif %}</span>
{% endblock %}

{% block widgetcontent %}
    <div id="transcript_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
        <button id="save_data">Save Text</button>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button id="undo_command" disabled="disabled">Undo</button>
        <button id="redo_command" disabled="disabled">Redo</button>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <input type="checkbox" id="spellcheck" />
        <label for="spellcheck">Spellcheck</label>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <span id="format">
            <input type="radio" id="format_block" name="format" checked="checked" />
            <label for="format_block">Block</label>
            <input type="radio" id="format_column" name="format" />
            <label for="format_column">Column</label>
        </span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <span id="navigate">
            <button class="nav_link" data-val="{{prev|default_if_none:''}}" id="prev_page">Previous Page</button>
            <button class="nav_link" data-val="{{next|default_if_none:''}}" id="next_page">Next Page</button>
        </span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <span id="status">
            <input class="ui-helper-hidden" type="radio" id="status_running" value="running" name="status"
                {% if doc.ocr_status == "running" %}checked="checked"{% endif %} />
            <input type="radio" id="status_uncorrected" value="uncorrected" name="status"
                {% if doc.ocr_status == "uncorrected" %}checked="checked"{% endif %} />
            <label for="status_uncorrected">Uncorrected</label>
            <input type="radio" id="status_part_corrected" value="part_corrected" name="status"
                {% if doc.ocr_status == "part_corrected" %}checked="checked"{% endif %} />
            <label for="status_part_corrected">Part corrected</label>
            <input type="radio" id="status_complete" value="complete" name="status"
                {% if doc.ocr_status == "complete" %}checked="checked"{% endif %} />
            <label for="status_complete">Corrected</label>
        </span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button id="flag_document">Flag</button>

        <span>&nbsp;&nbsp;&nbsp;</span>
        <a href="/presets/builder/{{doc.pid}}" id="edit_task">Edit</a>
    </div>
    <div id="transcript" class="ui-layout-center"></div>
    <div id="plugin" class="ui-layout-south ui-medium-flat ui-helper-hidden"></div>
{% endblock %}

{% block sidebarheader %}Binary Image{% endblock %}
{% block sidebarcontent %}
    <div id="viewer_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
        <button class="tbbutton" id="image_zoomout">Zoom Out</button>
        <button class="tbbutton" id="image_zoomin">Zoom In</button>
        <button class="tbbutton" id="centre">Centre</button>
        <button class="tbbutton" id="fullscreen">Full Screen</button>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <input type="checkbox" id="link_viewers" checked="checked" />
        <label for="link_viewers">Centre viewer on current line</label>
        <span id="vlink">
            <input type="radio" id="vlink_click" name="vlink" value="click" checked="checked" />
            <label for="vlink_click">click</label>  
            <input type="radio" id="vlink_hover" name="vlink" value="hover"  />
            <label for="vlink_hover">Hover</label>  
        </span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button class="tbbutton" id="refresh">Refresh</button>
    </div>
    <div id="viewer" class="imageviewer ui-layout-center ui-background-flat"></div>
{% endblock %}
